<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui">
    <body>
        <ui:composition template="/WEB-INF/templates/template.xhtml">     
        <style type="text/css">
            .ui-datepicker{ font-size: 9pt;} .ui-button{font-size: 12pt;}
            .ui-tabs{font-size: 12px;} .ui-tabs-panel{font-size: 12px;} .ui-tabs-panel{font-size: 12px;} 
            .ui-toolbar-group-left{font-size: 12px} 
            .ui-datatable .ui-datatable-header {
                        text-align: left;
                    }
        </style>
        <ui:define name="toolbar">
            <h:form id="formToolbarVendedor" >
                    <ui:include src="/WEB-INF/templates/toolbarVendedor.xhtml"/>
            </h:form> 
        </ui:define>      
        <ui:define name="body">  
            <p:panel id="panelConsultarVendedor"  style="font-size: 12px; border-width: 0px">   
                <h:form id="formBuscarVendedor" style="width: 250px;  ">
                    <p:growl id="messagesConsulta"/>
                    <p:fieldset id="fieldsetBuscarVendedor"   toggleable="false" legend="Buscar Vendedor" style="font-size: 12px; width: 250px;left: 13px;top: 14px;position: absolute" >  
                        <h:panelGrid columns="1" cellpadding="2"  style="font-size: 12px;margin-right: 8px;text-align: right; vertical-align: middle" >             
                            <p:inputText binding="#{vendedorWeb.textBuscarVendedor}" id="textBuscarVendedor" style="font-size: 12px" size="30" />
                            <h:outputText value="por"  style="font-size: 12px" />
                            <h:selectOneMenu binding="#{vendedorWeb.comboBuscarVendedor}"  id="comboBuscarVendedor"  style="font-size: 12px;height: 25px;alignment-baseline: middle; ">
                                <f:selectItem itemLabel="Seleccione..." itemValue="0"  />
                                <f:selectItem itemLabel="Numero de Vendedor" itemValue="NumeroVendedor" />
                                <f:selectItem itemLabel="Cedula" itemValue="NumeroCedula" />
                                <f:selectItem itemLabel="RUC" itemValue="NumeroRUC" />               
                                <f:selectItem itemLabel="Nombre o Apellido" itemValue="NombreVendedor" />
                                <f:selectItem itemLabel="Dirección" itemValue="Direccion" />
                                <f:selectItem itemLabel="Record de Ventas" itemValue="RecordVentas" />
                            </h:selectOneMenu>
                            <h:outputText value="coincidencia de búsqueda"  style="font-size: 12px" />
                            <h:selectOneMenu binding="#{vendedorWeb.comboCoincidenciaBusquedaVendedor}"  id="comboCoincidenciaBusquedaVendedor"  style="font-size: 12px;height: 25px;alignment-baseline: middle; ">
                                <f:selectItem itemLabel="Todas las Coincidencias" itemValue="todas"  />
                                <f:selectItem itemLabel="Coincidencia Exacta" itemValue="exacta" />
                                <f:selectItem itemLabel="Coincidencia Inicial" itemValue="inicial" />
                                <f:selectItem itemLabel="Coincidencia Final" itemValue="final" />                               
                            </h:selectOneMenu>
                            <p:commandButton ajax="false" id="botonBuscarVendedor" value="Consultar" icon="ui-icon-search" type="submit" actionListener="#{vendedorWeb.clicBotonBuscarVendedor()}" style="font-size: 12px; width: 100px; " />                           
                        </h:panelGrid>  
                    </p:fieldset> 
                </h:form> 
                <p:tabView orientation="top" style="left:300px; top: 28px;position: absolute; width: 75%" >
                    <p:tab id="tabVendedor" title="Vendedor (#{vendedorWeb.tablaDatosVendedor.size()} coincidencias)"  titleStyle="font-size: 12px;"   >
                        <h:panelGrid columns="1" cellpadding="1" >
                            <h:form id="formTablaConsultarVendedor" >
                                <p:dataTable  id="tablaConsultarVendedor" var="consultarVendedor" value="#{vendedorWeb.tablaDatosVendedor}" widgetVar="tablaConsultarVendedor" 
                                              emptyMessage="Búsqueda finalizada, no existe vendedor con los criterios de búsqueda ingresados" resizableColumns="false" paginator="true" rows="10"  
                                                rowsPerPageTemplate="5,10,20,100" selectionMode="single" selection="#{vendedorWeb.vendedorSeleccionado}" rowKey="#{consultarVendedor.numeroVendedor}" >
                                    <p:ajax event="rowSelect"  listener="#{vendedorWeb.eventoFilaSeleccionadaTablaConsultarVendedor()}" process="@this" update=":formDialogoEliminarVendedor" /> 
                                    <p:column id="columnaNumeroVendedor" sortBy="#{consultarVendedor.numeroVendedor}" filterBy="#{consultarVendedor.numeroVendedor}" headerText="Vendedor Numero"  style="width:143px" resizable="true" >
                                        <h:outputText value="#{consultarVendedor.numeroVendedor}"  />
                                    </p:column>
                                    <p:column id="columnaNumeroCedulaVendedor" sortBy="#{consultarVendedor.numeroCedula}" filterBy="#{consultarVendedor.numeroCedula}" headerText="Cedula"  style="width:230px" >
                                        <h:outputText value="#{consultarVendedor.numeroCedula}"  />
                                    </p:column>
                                    <p:column id="columnaNombreVendedor" sortBy="#{consultarVendedor.nombreVendedor}" filterBy="#{consultarVendedor.nombreVendedor}" headerText="Nombres / Apellidos"  style="width:340px" filterMatchMode="contains">
                                        <h:outputText value="#{consultarVendedor.nombreVendedor}"  />
                                    </p:column>
                                    <p:column id="columnaRecordVentasVendedor" sortBy="#{consultarVendedor.recordVentas}" filterBy="#{consultarVendedor.recordVentas}" headerText="RecordVentas"  style="width:200px"  >
                                        <h:outputText value="#{consultarVendedor.recordVentas}"  />
                                    </p:column>
                                    <f:facet  name="footer" >
                                        <p:commandButton  id="botonMostrarDatosVendedor" type="push" actionListener="#{vendedorWeb.mostrarDatosDialogoDatosVendedor()}" update=":formDialogoDatosVendedor,:formDialogoDatosVendedor:tablaDatosVendedorDialogo" oncomplete="dialogoConsultaVendedor.show()" value="Mostrar Datos" icon="ui-icon-search"     />
                                    </f:facet>
                                 </p:dataTable>
                            </h:form>
                        </h:panelGrid>
                    </p:tab>
                </p:tabView>                         
            </p:panel>            
            </ui:define>
            <ui:define name="dialogos" >
            <!--Dialogo para ver toda la informacion relacionada con el vendedor -->                
            <h:form id="formDialogoDatosVendedor">
                <p:dialog id="DialogoDatosVendedor" header="Datos del Vendedor:" widgetVar="dialogoConsultaVendedor" resizable="false"  
                           hideEffect="fold" modal="true" style="font-size: 12px"> 
                    <h:panelGrid columns="2" cellpadding="0" style="alignment-adjust: middle">                            
                            <p:dataTable id="tablaDatosVendedorDialogo" value="#{vendedorWeb.datosVendedorSeleccionado}" var="datosSeleccionado" >                                
                                <p:column  style="text-align: right; font-weight: bold">                                    
                                    <h:outputText value="#{datosSeleccionado.substring(0, 20)}" style="font-size: 12px" />                                 
                                </p:column>
                                <p:column  >                                    
                                    <h:outputText value="#{datosSeleccionado.substring(20)}" style="font-size: 12px" />                                 
                                </p:column>                                                                    
                            </p:dataTable>   
                    </h:panelGrid> 
                    <p:separator/>
                    <p:commandButton value="Cerrar" type="button" onclick="dialogoConsultaVendedor.hide()"/>
                </p:dialog>
            </h:form>      
            <!--Eliminacion Cliente -->    
            <h:form id="formDialogoEliminarVendedor"> 
                <ui:include  src="/formularios/gestionVendedores/eliminarVendedor.xhtml"/>                      
            </h:form>                   
            </ui:define>
        </ui:composition>
    </body>
</html>
